<template>
  <div>
    回顾组件通信
    <!-- 方式1 - 父子通信 -->
    <!-- 父到子通过v-bind传数据，子组件通过props来接收 -->
    <!-- 子到父，通过$emit发消息，父组件通过v-on进行监听 -->
    <!-- 通过$emit可以传数据，父组件通过$event来接收 -->
    <!-- 方式2 - 父子通信 -->
    <!-- 父组件通过ref得到子组件实例，可以直接调用子组件的方法、数据 -->
    <!-- <Son ref="sonRef" :count="num" @add="num++" @addN="num+=$event" /> -->

    <!-- 语法糖 v-model ， 用于简化父模板 -->
    <!-- v-model="num" 等效于：value="num"  @input="num=$event" -->
    <Son ref="sonRef" v-model="num" />

    <!-- 方式3 - 兄弟通信 -->
    <!-- 自动导入组件扩展:vue-helper -->
    <!-- <tom />
    <jerry /> -->

    <!-- 访问模块下面数据语法：$store.state.模块名.数据名 -->
    <div>token={{ $store.state.user.token }}</div>
    <button @click="setToken">setToken</button>
  </div>
</template>

<script>
import Jerry from './components/Jerry.vue'
import Son from './components/son.vue'
import Tom from './components/Tom.vue'
export default {
  components: {
    Son,
    Tom,
    Jerry
  },
  data() {
    return {
      num: 0
    }
  },
  mounted() {
    // this.$refs.sonRef.$refs.inputRef.focus()
    // this.$refs.sonRef.focus()
  },
  methods: {
    setToken() {
      // 方式1 - 调用模块当中mutation
      this.$store.commit('user/setToken', '123')
    }
  }
}
</script>

<style>

</style>
